<template>
  <el-cascader
    clearable
    :options="provinceList"
    :value='value'
    @change='getCity'
    @active-item-change="handleItemChange"
    :props="props"
  ></el-cascader>
</template>

<script>
export default {
  name: "Region",
  data() {
    return {
      value: [],
      provinceList: [],
      props: {
        value: "label",
        children: "cities"
      }
    };
  },
  created() {
    this.getOptions('province'); // 获取省份列表
  },
  methods: {
      clear() {
        this.value = [];
      },
      // 回显
      setValueById(provinceId, cityId) {
        this.getListById(0, provinceId);
        Promise.all([this.getListById(0, provinceId), this.getListById(provinceId, cityId)]).then(arr => {
          const value = [];
          this.getOptions('city', provinceId)
          value.push(arr[0].name);
          value.push(arr[1].name);
          this.value = value;
          const obj ={
            province: arr[0],
            city: arr[1]
          }
          this.$emit('getRegion', obj);
        });
      },
      getListById(parentId, id) {
          return new Promise((resolve, reject) => {
            this.$store.dispatch('GET_REGION', {
                parentId,
            }).then(res => {
                if(res.data.retCode == 0) {
                  const list = res.data.data;
                  const arr = list.filter(item => item.id == id);
                  resolve(arr[0])
                } else {
                  res.data.errorMsg && this.$message({
                    message: res.data.errorMsg,
                    type: 'warning'
                  });
                }
            }).catch(err => {
              reject(err);
            })
          })
      },
     
      handleItemChange(arr) {
        const list = this.provinceList.filter(item => item.name == arr[0]);
        this.getOptions('city', list[0].id)
      },
      getOptions(type, id) {
          console.log('this.$store.state.provinceList', this.$store.state.provinceList);
          this.$store.dispatch('GET_REGION', {
              parentId: id || 0
          }).then(res => {
              console.log('getProvince::res:::', res);
              if(res.data.retCode == 0) {
                if(type == 'province') {
                  const list = res.data.data;
                  for(let i = 0; i < list.length; i++) {
                    list[i].label = list[i].name;
                    list[i].cities = [];
                  }
                  this.provinceList = list;
                } else {
                  this.addCityToProvinceList(id, res.data.data)
                }
              } else {
                res.data.errorMsg && this.$message({
                  message: res.data.errorMsg,
                  type: 'warning'
                });
              }
          })
      },
      addCityToProvinceList(id, cities) {
        console.log('cities:::', cities);
        for(let j = 0; j < cities.length; j++) {
          cities[j].label = cities[j].name;
        }
        for(let i = 0; i < this.provinceList.length; i++) {
          if(id == this.provinceList[i].id) {
            if(cities.length > 0) {
              this.provinceList[i].cities = cities;
            }
          }
        }
      },
      getCity(arr) {
        console.log('arr:::', arr);
        console.log('provinceList::', this.provinceList);
        this.value = arr;
        const obj = {};
        if(arr.length > 0) {
          const item = this.provinceList.filter(item => item.name == arr[0]);
          obj.province = {
            id: item[0].id,
            name: item[0].name
          }
          const cities = item[0].cities.filter(city => city.name == arr[1]);
          obj.city = {
            id: cities[0].id,
            name: cities[0].name
          }
        }
        this.$emit('getRegion', obj);
      }
  }
};
</script>

